import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

import '../../app_views.dart';

class ProfileView extends GetView<ProfileLogic> {
  const ProfileView({super.key});

  // 显示功能建设中弹窗 - Show coming soon dialog
  void _showComingSoon(String feature) {
    Get.dialog(
      Dialog(
        backgroundColor: Colors.transparent,
        child: Container(
          margin: const EdgeInsets.all(20),
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: AppColors.gradientWarm,
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            borderRadius: BorderRadius.circular(24),
            boxShadow: [
              BoxShadow(
                color: AppColors.shadow.withOpacity(0.3),
                blurRadius: 20,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // 图标 - Icon
              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: AppColors.textOnPrimary.withOpacity(0.2),
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Icon(
                  Icons.construction_rounded,
                  size: 48,
                  color: AppColors.textOnPrimary,
                ),
              ),
              const SizedBox(height: 20),
              // 标题 - Title
              Text(
                '功能建设中',
                style: GoogleFonts.notoSansSc(
                  fontSize: 22,
                  fontWeight: FontWeight.w800,
                  color: AppColors.textOnPrimary,
                ),
              ),
              const SizedBox(height: 12),
              // 内容 - Content
              Text(
                '$feature 功能正在开发中\n敬请期待更多精彩功能！',
                textAlign: TextAlign.center,
                style: GoogleFonts.notoSansSc(
                  fontSize: 16,
                  fontWeight: FontWeight.w500,
                  color: AppColors.textOnPrimary.withOpacity(0.9),
                  height: 1.5,
                ),
              ),
              const SizedBox(height: 24),
              // 按钮 - Button
              Container(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () => Get.back(),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: AppColors.textOnPrimary,
                    foregroundColor: AppColors.primary,
                    padding: const EdgeInsets.symmetric(vertical: 16),
                    elevation: 0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(16),
                    ),
                  ),
                  child: Text(
                    '我知道了',
                    style: GoogleFonts.notoSansSc(
                      fontSize: 16,
                      fontWeight: FontWeight.w700,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    // 确保控制器被初始化
    Get.put(ProfileLogic());

    return Scaffold(
      backgroundColor: AppColors.background,
      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter,
            colors: [
              AppColors.background,
              AppColors.backgroundLight,
            ],
          ),
        ),
        child: CustomScrollView(
          slivers: [
            SliverAppBar(
              expandedHeight: 280,
              pinned: true,
              backgroundColor: Colors.transparent,
              elevation: 0,
              flexibleSpace: FlexibleSpaceBar(
                background: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: AppColors.gradientSunset,
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                    borderRadius: const BorderRadius.only(
                      bottomLeft: Radius.circular(40),
                      bottomRight: Radius.circular(40),
                    ),
                  ),
                  child: SafeArea(
                    child: Center(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                          // 头像容器 - Avatar container
                          GestureDetector(
                            onTap: controller.handleAuthAction,
                            child: Obx(() => AnimatedContainer(
                                  duration: const Duration(milliseconds: 300),
                                  width: 120,
                                  height: 120,
                                  decoration: BoxDecoration(
                                    color: AppColors.backgroundCard,
                                    shape: BoxShape.circle,
                                    border: Border.all(
                                        color: AppColors.textOnPrimary,
                                        width: 4),
                                    boxShadow: [
                                      BoxShadow(
                                        color: AppColors.textOnPrimary
                                            .withOpacity(0.3),
                                        blurRadius: 20,
                                        offset: const Offset(0, 10),
                                      ),
                                      BoxShadow(
                                        color: AppColors.shadow,
                                        blurRadius: 16,
                                        offset: const Offset(0, 8),
                                      ),
                                    ],
                                  ),
                                  child: Icon(
                                    controller.state.value.isLoggedIn
                                        ? Icons.person_rounded
                                        : Icons.person_outline_rounded,
                                    size: 60,
                                    color: AppColors.primary,
                                  ),
                                )),
                          ),
                          const SizedBox(height: 20),
                          // 用户信息或登录提示 - User info or login prompt
                          GestureDetector(
                            onTap: controller.handleAuthAction,
                            child: Obx(() => Column(
                                  children: [
                                    Text(
                                      controller.displayName(),
                                      style: GoogleFonts.notoSansSc(
                                        color: AppColors.textOnPrimary,
                                        fontSize: 24,
                                        fontWeight: FontWeight.w800,
                                      ),
                                    ),
                                    const SizedBox(height: 8),
                                    Container(
                                      padding: const EdgeInsets.symmetric(
                                        horizontal: 16,
                                        vertical: 8,
                                      ),
                                      decoration: BoxDecoration(
                                        color: AppColors.textOnPrimary
                                            .withOpacity(0.2),
                                        borderRadius: BorderRadius.circular(20),
                                        border: Border.all(
                                          color: AppColors.textOnPrimary
                                              .withOpacity(0.3),
                                          width: 1,
                                        ),
                                      ),
                                      child: Text(
                                        controller.state.value.isLoggedIn
                                            ? '已登录'
                                            : '立即登录享受更多服务',
                                        style: GoogleFonts.notoSansSc(
                                          color: AppColors.textOnPrimary
                                              .withOpacity(0.9),
                                          fontSize: 14,
                                          fontWeight: FontWeight.w600,
                                        ),
                                      ),
                                    ),
                                  ],
                                )),
                          ),
                          const SizedBox(height: 20),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            SliverPadding(
              padding: const EdgeInsets.all(20),
              sliver: SliverList(
                delegate: SliverChildListDelegate([
                  const SizedBox(height: 20),
                  // 个人服务 - Personal Services
                  _buildSectionTitle('个人服务'),
                  const SizedBox(height: 16),
                  _buildMenuGrid([
                    {'title': '我的订单', 'icon': Icons.receipt_long_rounded},
                    {'title': '我的收藏', 'icon': Icons.favorite_rounded},
                    {'title': '我的积分', 'icon': Icons.stars_rounded},
                    {'title': '我的优惠券', 'icon': Icons.local_offer_rounded},
                  ]),
                  const SizedBox(height: 32),

                  // 更多功能 - More Features
                  _buildSectionTitle('更多功能'),
                  const SizedBox(height: 16),
                  _buildMenuGrid([
                    {'title': '设置', 'icon': Icons.settings_rounded},
                    {'title': '帮助与反馈', 'icon': Icons.help_rounded},
                    {'title': '关于我们', 'icon': Icons.info_rounded},
                    {'title': '隐私政策', 'icon': Icons.privacy_tip_rounded},
                  ]),
                  const SizedBox(height: 32),

                  // 退出登录按钮 - Logout Button
                  Obx(() => controller.state.value.isLoggedIn
                      ? Container(
                          width: double.infinity,
                          margin: const EdgeInsets.symmetric(horizontal: 20),
                          child: GestureDetector(
                            onTap: controller.logout,
                            child: Container(
                              decoration: BoxDecoration(
                                gradient: LinearGradient(
                                  colors: [
                                    AppColors.error.withOpacity(0.1),
                                    AppColors.error.withOpacity(0.05),
                                  ],
                                  begin: Alignment.topLeft,
                                  end: Alignment.bottomRight,
                                ),
                                border: Border.all(
                                  color: AppColors.error.withOpacity(0.3),
                                  width: 1.5,
                                ),
                                borderRadius: BorderRadius.circular(18),
                              ),
                              padding: const EdgeInsets.symmetric(vertical: 4),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Icon(
                                    Icons.logout_rounded,
                                    color: AppColors.error,
                                    size: 20,
                                  ),
                                  const SizedBox(width: 8),
                                  Text(
                                    '退出登录',
                                    style: GoogleFonts.notoSansSc(
                                      fontSize: 16,
                                      fontWeight: FontWeight.w600,
                                      color: AppColors.error,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          ),
                        )
                      : const SizedBox.shrink()),
                  const SizedBox(height: 40),
                ]),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建章节标题 - Build section title
  Widget _buildSectionTitle(String title) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4),
      child: Text(
        title,
        style: GoogleFonts.notoSansSc(
          fontSize: 18,
          fontWeight: FontWeight.bold,
          color: AppColors.textPrimary,
        ),
      ),
    );
  }

  // 构建菜单网格 - Build menu grid
  Widget _buildMenuGrid(List<Map<String, dynamic>> items) {
    return GridView.builder(
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
        childAspectRatio:
            4.2, // 增加高宽比，让背景更宽 - Increase aspect ratio for wider background
        crossAxisSpacing: 18, // 减少间距 - Reduce spacing
        mainAxisSpacing: 18,
      ),
      itemCount: items.length,
      itemBuilder: (context, index) {
        final item = items[index];
        return _buildMenuItem(
          item['icon'] as IconData,
          item['title'] as String,
          index,
          () => _showComingSoon(item['title'] as String),
        );
      },
    );
  }

  // 构建菜单项 - Build menu item
  Widget _buildMenuItem(
      IconData icon, String title, int index, VoidCallback onTap) {
    // 根据索引选择渐变色 - Choose gradient color based on index
    List<Color> gradientColors;
    switch (index % 4) {
      case 0:
        gradientColors = AppColors.gradientPrimary;
        break;
      case 1:
        gradientColors = AppColors.gradientSecondary;
        break;
      case 2:
        gradientColors = AppColors.gradientAccent;
        break;
      default:
        gradientColors = AppColors.gradientCool;
    }

    return GestureDetector(
        onTap: onTap,
        child: AnimatedContainer(
            duration: const Duration(milliseconds: 200),
            padding: const EdgeInsets.symmetric(
                horizontal: 16, vertical: 10), // 增加内边距 - Increase padding
            decoration: BoxDecoration(
              gradient: LinearGradient(
                colors: gradientColors
                    .map((color) => color.withOpacity(0.1))
                    .toList(),
                begin: Alignment.topLeft,
                end: Alignment.bottomRight,
              ),
              borderRadius: BorderRadius.circular(20),
              border: Border.all(
                color: gradientColors.first.withOpacity(0.2),
                width: 1.5,
              ),
              boxShadow: [
                BoxShadow(
                  color: gradientColors.first.withOpacity(0.1),
                  blurRadius: 12,
                  offset: const Offset(0, 4),
                ),
                BoxShadow(
                  color: AppColors.shadow.withOpacity(0.05),
                  blurRadius: 8,
                  offset: const Offset(0, 2),
                ),
              ],
            ),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: gradientColors,
                      begin: Alignment.topLeft,
                      end: Alignment.bottomRight,
                    ),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  child: Center(
                    child: Icon(
                      icon,
                      color: AppColors.textOnPrimary,
                      size: 12,
                    ),
                  ),
                ),
                const SizedBox(width: 10),
                Expanded(
                  child: Align(
                    alignment: Alignment.center,
                    child: Text(
                      title,
                      textAlign: TextAlign.center,
                      style: GoogleFonts.notoSansSc(
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                        color: AppColors.textPrimary,
                      ),
                      maxLines: 1,
                      overflow: TextOverflow.ellipsis,
                    ),
                  ),
                ),
                Container(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 5, vertical: 2),
                  decoration: BoxDecoration(
                    color: gradientColors.first.withOpacity(0.1),
                    borderRadius: BorderRadius.circular(8),
                  ),
                  child: Center(
                    child: Icon(
                      Icons.chevron_right_rounded,
                      color: gradientColors.first,
                      size: 15,
                    ),
                  ),
                ),
              ],
            )));
  }
}
